<template>
	<div class="login">
		<van-row type="flex" justify="center">
			<van-col span="22">
				<div class="login-title">登陆login</div>
			</van-col>
		</van-row>
		<van-row class="login-top">
			<van-col span="24">
				<van-row type="flex" justify="center">
					<van-col span="6">
						<div class="login-logo">
							<img :src='logo' />
						</div>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<van-row type="flex" justify="center">
			<van-col span="22" class="login-from">
				<van-row type="flex" justify="center">
					<van-col span="20">
						<van-row type="flex">
							<van-col>
								<div class="login-from-title">欢迎使用禧电宝</div>
							</van-col>
						</van-row>
						<van-row type="flex">
							<van-col span="24">
								<div class="login-from-border">
									<van-form @submit="onSubmit">
										<van-field v-model="username" name="用户名" label="账号" placeholder="账号" :rules="[{ required: true, message: '输入登陆账号' }]" />
										<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '输入密码' }]"
										 style="margin-top:10px;" />
										<div style="margin:30px 0px 0px 0px;">
											<van-button block type="info" native-type="submit" style="font-size:18px;" class="login-from-botton1">
												立即登陆
											</van-button>
										</div>
										<van-row type="flex" justify="center" class="login-from-zhucei">
											<van-col span="10">
												<div class="login-from-botton">注册账号</div>
											</van-col>
										</van-row>
									</van-form>
								</div>
							</van-col>
						</van-row>
					</van-col>
				</van-row>
			</van-col>
		</van-row>
		<van-row type="flex" justify="center" class="login-footer">
			<van-col span="22">
				<div class="login-footer-title">
					<span>注册、登陆即表示同意 </span><a>禧电用户服务协议</a>
				</div>
			</van-col>
		</van-row>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				logo: require('../assets/img/logo.png'),
				username: '',
				password: '',
			};
		},
		methods: {
			onSubmit(values) {
				console.log('submit', values);
			},
		},
	}
</script>
<style scoped>
	/deep/ .van-field__label {
		font-size: 15px;
		width: 56px;
		font-weight: bold;
	}

	.login-title {
		text-align: center;
		font-size: 19px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight:bold;
		line-height: 40px;
		color: #000000;
	}

	.login-top {
		background: linear-gradient(#6fb1ff, #1f7eed);
		height: 250px;
		position: relative;
	}

	.login-logo {
		line-height: 185px;
	}

	.login-logo>img {
		width: 80px;
		height: 60px;
	}

	.login-from {
		position: absolute;
		height: 289px;
		top: 190px;
		background: #ffffff;
		z-index: 1;
		border-radius: 15px;
	}

	.login-from-title {
		font-size: 15px;
		font-weight: bold;
		text-align: center;
		color: #4a4a4a;
		line-height: 15pt;
		margin-top: 15px;
	}

	.login-footer-title>a {
		font-size: 12px;
	}

	.login-from-border {
		text-align: center;
		margin-top: 20px;
	}

	.login-from-botton {
		/* font-size: 18px; */
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		color: #fff;
	}

	.login-from-botton {
		font-size: 18px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		color: #9b9b9b;
	}

	.login-from-zhucei {
		margin-top: 42px;
	}

	.login-footer {
		margin-top: 409px;
		line-height: 50px;
	}

	.login-footer-title {
		text-align: center;
	}

	.login-footer-title>span {
		font-size: 12px;
		font-family: PingFangSC, PingFangSC-Regular;
		font-weight: bold;
		text-align: center;
		color: #212121;
	}

	.login-footer-title>a {
		font-size: 12px !important;
		font-weight: 400;
		text-align: center;
		color: blue;
	}

	/deep/ .van-cell {
		border: 1px solid #9b9b9b;
		border-radius: 5px;
	}
</style>
